<template>
  <div class="container">
    <a-form-model style="margin-bottom:20px;" :label-col="{ span: 1 }" :wrapper-col="{ span: 14 }" >
      <a-form-model-item label="">
        <a-select show-search style="width: 240px;margin-bottom:20px;" v-model="keyWord" @change="onSearch">
          <a-select-option :value="item.account" v-for="(item,index) in accountList" :key="index">
            {{item.account}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
    <a-row class="row" justify="center">
      <a-col :xxl="12" :xl="12" :md="24" :sm="24" :xs="24" >
        <div id="chart-main-zhanxian" style="width:100%;height:400px;"></div>
      </a-col>
      <a-col :xxl="12" :xl="12" :md="24" :sm="24" :xs="24" >
        <div id="chart-main-dianji" style="width:100%;height:400px;"></div>
      </a-col>
    </a-row>
    <a-row class="row" justify="center">
      <a-col :xxl="12" :xl="12" :md="24" :sm="24" :xs="24" >
        <div id="chart-main-xiaofei" style="width:100%;height:400px;"></div>
      </a-col>
      <a-col :xxl="12" :xl="12" :md="24" :sm="24" :xs="24" >
        <div id="chart-main-zhifu" style="width:100%;height:400px;"></div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {getCampaignByAccount} from '@/api/shuju/shuju'
import {getBdAccountList} from '@/api/xinxiliu/account'

export default {
  name:'shujuBingtu',
  data() {
    return {
      keyWord:'',
      dataSource:[],
      rowWidth:0,

      accountList:[],

      chartArr:[],
    }
  },
  mounted(){
    // this.init()
  },
  methods:{
    init(){
      this.getAccount()
    },
    getAccount(){
      getBdAccountList({}).then((res) => {
        if(res.errcode == 0){
          this.accountList = res.data.filter(e=>e.pid != 0)
          let userName = ''
          if(this.list.length > 0){
            userName = this.list[0].userName
          }
          if(this.accountList.find(e=>e.account == userName)){
            this.keyWord = userName
          }else{
            this.keyWord = this.accountList[0].account
          }
          if(this.keyWord != ''){
            this.onSearch(this.keyWord)
          }
        }
      });
    },
    getJihua(){ // 获取账户下的计划
      var myChart_zhanxian = echarts.init(document.getElementById('chart-main-zhanxian'));
      var myChart_dianji = echarts.init(document.getElementById('chart-main-dianji'));
      var myChart_xiaofei = echarts.init(document.getElementById('chart-main-xiaofei'));
      var myChart_zhifu = echarts.init(document.getElementById('chart-main-zhifu'));
      this.chartArr = [{name:'impression',chart:myChart_zhanxian,title:'展现'},{name:'click',chart:myChart_dianji,title:'点击'},{name:'cost',chart:myChart_xiaofei,title:'消费'},{name:'ctProductPaySuccess',chart:myChart_zhifu,title:'商品支付成功量'}]
      for(let item of this.chartArr){
        item.chart.showLoading({
          text: 'loading',
        });
      }
      getCampaignByAccount({account:this.keyWord}).then((res) => {
        console.log(res)
        if(res.errcode == 0){
          // this.rowWidth = document.getElementsByClassName('row')[0].clientWidth/2
          this.$nextTick(()=>{
            this.setData(res.data)
          })  
        }
      });
    },
    setData(data){
      for(let item of this.chartArr){
        data.sort((a,b)=>b[item.name] - a[item.name])
        let list = data.slice(0,10)
        item.seriesData = list.map(e=>{
          return {
            value:e[item.name],
            name:e.campaignNameStatus
          }
        })
        item.chart.hideLoading()
        item.chart.setOption({
          title: {
            text: item.title,
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
            {
              name: this.keyWord,
              type: 'pie',
              radius: ['30%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              data: item.seriesData
            }
          ]
        })
      }
      console.log(this.chartArr)
    },
    onSearch(userName){
      // console.log(userName)
      this.keyWord = userName
      if(userName != ''){
        this.dataSource = this.list.filter(o=>o.userName == userName)
      }else{
        this.dataSource = this.list
      }
      this.getJihua()
    }
  },
  watch:{
    list(){
      this.init()
    }
  },
  props:{
    list:{
      type:Array,
      default:()=>[]
    },
  }
}
</script>

<style lang="less" scoped>
.container{
  .row{
    margin-bottom: 20px;
  }
  canvas{
    width: 100%;
  }
}

</style>